<template>
  <div class="video-item" @click="toDetail(props.data.id)">
    <div class="video-img">
      <el-image
        :src="props.data.video?.firstImgUrl"
        style="width: 130px; height: 90px"
      >
        <template #error>
          <div class="image-slot">加载失败</div>
        </template>
      </el-image>
    </div>
    <div class="video-main">
      <div style="color: #000; font-size: 15px">
        {{ props.data.video?.title }}
      </div>
      <div class="fcolor-1">
        <div class="align">
          <el-icon><Avatar /></el-icon>
          &nbsp;
          {{ props.data.user?.nickname }}
        </div>
        <div
          style="justify-content: space-between; line-height: 20px"
          class="align"
        >
          <div class="align">
            <el-icon><Iphone /></el-icon>
            &nbsp;
            {{ tool.formatRelativeTime(props.data.createTime) }}
          </div>
          <div style="" @click.stop="del(props.data.id)">
            <el-icon><Delete /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import tool from "@/assets/js/tool";
import { defineProps, defineEmits } from "vue";
import { Delete, Avatar, Iphone } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["del"]);

const del = (id) => {
  emits("del", id);
};
const router = useRouter();
const toDetail = (id) => {
  router.push({
    path: "/client/detail",
    query: {
      vid: id,
    },
  });
};
</script>

<style scoped lang="scss">
@mixin flexBox() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-item {
  height: 90px;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.video-img {
  width: 130px;
  height: 90px;
  margin-right: 10px;
  background: #eee;
  @include flexBox();
  .image-slot {
    color: #9e9e9e;
    font-size: 12px;
    height: 100%;
    @include flexBox();
  }
}

.video-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
}
</style>
